<template>
	<view class="">
		<view class="img">

			<image style="width:100%;height:100%;" mode="widthFix" :src="Goodsitem.goodsImg" v-if="Goodsitem.goodsImg"></image>
			<image src="/static/img/ic_load_fail.png" style="width:100%;height:100%;" mode="widthFix" v-else></image>
		</view>
		<view class="goods">{{Goodsitem.goodsName}}</view>
		<view class="goods_price">
			<text>¥{{number.oneparsePrice(Goodsitem.price)}}</text>
			<text>快递：{{number.oneparsePrice(Goodsitem.freight || "0")}}元</text>
		</view>
		<view class="goods_tips">
			<view :class="[type==item.id?'tips_item':'tips_itemnosel']" v-for="(item,index) in Goodsdata" :key="index"
				@click="typeofs(item)">
				{{item.goodsName}}
			</view>
		</view>
		<view class="goods_detail">
			产品详情
		</view>
		<view class="goods_detail_concent">
			<rich-text :nodes="Goodsitem.goodsDetailInfo"></rich-text>
		</view>
		<view class="goods_detail_footer">
			<view @click="toOrderList">订单列表</view>
			<view @click="showPopup">立即购买</view>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="product_size">
				<view class="goods_details">
					<view>
						<!-- <image style="width:180rpx;" mode="widthFix" :src="Goodsitem.goodsImg"></image> -->
						<image style="width:180rpx;" mode="widthFix" :src="Goodsitem.goodsImg"></image>
					</view>
					<view class="goods_name">
						<text>{{Goodsitem.goodsName}}</text>
						<text class="font_small"
							style="color:#FF6100;">¥{{number.oneparsePrice(Goodsitem.price)}}</text>
					</view>
				</view>
				<view class="goods_num">
					<view class="font_small">购买数量</view>
					<view>
						<u-number-box v-model="goodsNum" @change="goodsNumChange" :min="1"></u-number-box>

					</view>

				</view>
				<view class="confirm" @click="goPay">确 定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import number from "../../../utils/number.js";
	const api = require('../../../config/api');
	const util = require('../../../utils/util');
	export default {
		data() {
			return {
				number: number, //声明number属性并赋值为引入的number模块
				goodsId: '',
				Goodsdata: [],
				Goodsitem: {},
				type: '',

				show: false,
				goodsNum: 1
			}
		},
		onLoad(o) {
			this.goodsId = o.goodsId
			this.getGoodsdetail();
		},
		methods: {
			goPay() {
				uni.navigateTo({
					url: '/pages/indexChild/payment/payment?goodsId=' + this.Goodsitem.id + '&' + 'goodsNum=' +
						this.goodsNum,
				})
			},
			showPopup() {
				this.show = true
			},
			goodsNumChange(e) {
				console.log('当前值为: ' + e.value)
			},
			toOrderList() {

			},
			// 修改规格
			typeofs(item) {
				console.log(item);
				// 激活样式是当前点击的对应下标--list中对应id
				this.type = item.id;
				this.Goodsitem = item
				// 可以根据点击事件改变内容
				// this.getInfoAmt();
				// uni.showLoading({
				// 	title: '',
				// 	mask: true
				// })
			},
			async getGoodsdetail() {
				const res = await util.request(
					api.goodsUrl + '/' + this.goodsId, {},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.Goodsdata = res.data
					this.Goodsitem = res.data[0]
					this.type = res.data[0].id
					// this.bannerlist = res.data.imgList
					// this.moduleList = res.data.module
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
		// height: 520rpx;
	}

	.goods {
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 10px;
		font-size: 16px;

	}

	.goods_price {
		padding: 20rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #FF6100;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}

	.goods_price>text:first-child {
		font-weight: 600;
		font-size: 32rpx;
	}

	.goods_tips {
		margin-left: 10px;
		margin-right: 10px;
		height: 35px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.tips_item {

			width: 130px;
			margin-left: 5px;
			border-radius: 4px;
			margin-top: 10px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			background-color: #FF4A4A;
			color: #fff;
			font-size: 12px;
		}

		.tips_itemnosel {
			width: 130px;

			margin-left: 5px;
			border-radius: 4px;
			margin-top: 10px;
			text-align: center;

			height: 30px;
			line-height: 30px;
			background-color: #EEEEEE;
			color: #000000;
			font-size: 12px;
		}
	}

	.goods_detail {
		font-size: 16px;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 10px;
		font-weight: 600;
	}

	.goods_detail_concent {
		margin-top: 10px;
		// width: 100%;
		padding: 10px;
		overflow-x: hidden;
		padding-bottom: 50px;
	}

	.goods_detail_footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 50px;
		display: flex;
	}

	.goods_detail_footer>view {
		height: 50px;
		width: 50%;
		background-color: #FFA800;
		color: white;
		font-size: 18px;
		text-align: center;
		line-height: 50px;
	}

	.goods_detail_footer>view:last-child {
		background-color: #FF6100;
	}

	.product_size {
		padding: 32rpx 32rpx 0 32rpx;
	}

	.goods_details {
		display: flex;
		align-items: center;
	}

	.goods_num {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goods_name>text {
		display: block;
		margin-left: 20rpx;
	}

	.confirm {
		font-size: 17px;
		color: #fff;
		// width: 90%;
		// margin: 40rpx auto;
		margin: 20px 30px;
		border-radius: 50rpx;
		line-height: 44px;
		height: 44px;
		text-align: center;
		background-color: #FF9000;
		box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.05);
	}

	.font_small {
		font-size: 30rpx;
	}
</style>